<template>
<div>
  <div class="custom-mapinfo-right-card">
    <div class="cardTop"></div>
    <div class="cardMid">
      <ul>
        <li>
          <span class="right-card-item-icon right-card-item-commity"></span>
          <div class="right-card-item-content">
            <span class="h1 dropMenu">党员</span>
            <span class="p"><b>{{showData.partyMemberTotal}}</b>个</span>
          </div>
        </li>
        <li>
          <span class="right-card-item-icon right-card-item-house"></span>
          <div class="right-card-item-content">
            <span class="h1">特殊人群</span>
            <span class="p"><b>{{showData.specialPopulationTotal}}</b>个</span>
          </div>
        </li>
        <li>
          <span class="right-card-item-icon right-card-item-conyard"></span>
          <div class="right-card-item-content">
            <span class="h1">户籍人口</span>
            <span class="p"><b>{{showData.householdPopulationTotal}}</b>个</span>
          </div>
        </li>
        <li>
          <span class="right-card-item-icon right-card-item-retanhouse"></span>
          <div class="right-card-item-content">
            <span class="h1">流动人口</span>
            <span class="p"><b>{{showData.mobilePopulationTotal}}</b>个</span>
          </div>
        </li>
        <li>
          <span class="right-card-item-icon right-card-item-people"></span>
          <div class="right-card-item-content">
            <span class="h1">境外人员</span>
            <span class="p"><b>{{showData.overseasPersonTotal}}</b>个</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="cardBot"></div>
  </div>

  <div class="custom-mapinfo-bottom-card">
    <div class="scardTop">
      <div class="searchForm">
        <el-col :span="20">
          <el-input class="keyword" v-model="selectForm.keyword" placeholder="请输入搜索内容"> </el-input>
        </el-col>
        <el-col :span="4">
          <el-button class="search_btn" type="primary" @click="search">&nbsp;</el-button>
        </el-col>
      </div>
    </div>
    <div class="scardBot">
      <div class="custom-seach-item">
        <ul>
          <li :class="curItem.indexOf(index) !== -1?'active':''" v-for='(item, index) in searchItem' :key="index" @click="handleSearchItem(index)">
            <p>{{item.name}}</p>
            <img :src="item.img" />
          </li>
        </ul>
        <dl class="custom-chilren-item" >
          <dd v-for="(item, index) in childrenData" :key="index" @click="handleSelectItem(index)" :class="childrenItem === index?'active '+item.class:item.class" >{{item.name}}</dd>
        </dl>
      </div>
    </div>
  </div>
  <el-dialog class="special-style" :title="dialogTitle" :visible.sync="dialogFormVisible" :before-close="close">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>小区详情</span>
        <el-button style="float: right; padding: 3px 0" type="text">查看楼栋</el-button>
      </div>
      <div class="text item">
        <span>名称：</span>
        <span>平电一号院</span>
      </div>
      <div class="text item">
        <span>物业公司：</span>
        <span>南虹物业</span>
      </div>
      <div class="text item">
        <span>物业负责人：</span>
        <span>平电一号院</span>
      </div>
      <div class="text item">
        <span>联系电话：</span>
        <span>平电一号院</span>
      </div>
    </el-card>
  </el-dialog>
</div>
</template>
<script>
import {getPeopleData} from '@/data/applicationData'
import {getApplicationPeople, getPeopleParty, getPeopleSpecia, getPeopleHj, getPeopleLd, getPeopleJw} from '@/http/application'
export default {
  props: {
    detailForm: {
      type: Object,
      default: function () {
        return {
        }
      }
    }
  },
  data () {
    return {
      loading: null,
      selectForm: {},
      showData: {},
      resData: [],
      childrenData: [],
      dialogFormVisible: false,
      dialogAppFormVisible: false,
      childrenItem: 0,
      dialogTitle: '',
      classNameArr: [
        'right-card-item-commity',
        'right-card-item-building',
        'right-card-item-house',
        'right-card-item-retanhouse',
        'right-card-item-conyard'
      ],
      curItem: [],
      searchItem: [
        {img: require('@/assets/application/people/search_icon01_pressed.png'), name: '党员'},
        {img: require('@/assets/application/people/search_icon03_pressed.png'), name: '特殊人群'},
        {img: require('@/assets/application/people/search_icon04_pressed.png'), name: '户籍人口'},
        {img: require('@/assets/application/people/search_icon05_pressed.png'), name: '流动人口'},
        {img: require('@/assets/application/people/search_icon06_pressed.png'), name: '境外人员'}
      ]
    }
  },
  mounted () {
    this.OrganizeData = getPeopleData()
    this.childrenData = this.OrganizeData[0]
    this.getData()
  },
  computed: {},
  // 方法集合
  methods: {
    getData () {
      getApplicationPeople().then(resp => {
        if (resp.code && resp.code === '200') {
          this.showData = resp.data
        }
      })
    },
    search () {
      this.loadData()
      if (this.curItem !== '' && this.selectForm.keyword !== '') {
        this.loadingMast()
      } else {
        this.$message({
          type: 'info',
          message: '请先选择分类并且填写想要搜索的内容！'
        })
      }
    },
    loadingMast () {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    dialogShow () {
      this.dialogFormVisible = true
      this.getFormData(this.detailForm.id)
    },
    loadData () {
      this.resData = []
      if (this.curItem.indexOf(0) !== -1) {
        getPeopleParty(this.selectForm).then(resp => {
          if (resp.code && resp.code === '200') {
            resp.data.name = resp.location
            for (let i = 0; i < resp.data.items.length; i++) {
              const element = resp.data.items[i]
              element.formName = '党员'
            }
            this.resData.push(resp.data)
            if (this.resData.length === this.curItem.length) this.$emit('transmit', this.resData)
            this.loading.close()
          }
        })
      }
      if (this.curItem.indexOf(1) !== -1) {
        getPeopleSpecia(this.selectForm).then(resp => {
          if (resp.code && resp.code === '200') {
            resp.data.name = resp.location
            for (let i = 0; i < resp.data.items.length; i++) {
              const element = resp.data.items[i]
              element.formName = '特殊人群'
            }
            this.resData.push(resp.data)
            if (this.resData.length === this.curItem.length) this.$emit('transmit', this.resData)
            this.loading.close()
          }
        })
      }
      if (this.curItem.indexOf(2) !== -1) {
        getPeopleHj(this.selectForm).then(resp => {
          if (resp.code && resp.code === '200') {
            resp.data.name = resp.location
            for (let i = 0; i < resp.data.items.length; i++) {
              const element = resp.data.items[i]
              element.formName = '户籍人口'
            }
            this.resData.push(resp.data)
            if (this.resData.length === this.curItem.length) this.$emit('transmit', this.resData)
            this.loading.close()
          }
        })
      }
      if (this.curItem.indexOf(3) !== -1) {
        getPeopleLd(this.selectForm).then(resp => {
          if (resp.code && resp.code === '200') {
            resp.data.name = resp.location
            for (let i = 0; i < resp.data.items.length; i++) {
              const element = resp.data.items[i]
              element.formName = '流动人口'
            }
            this.resData.push(resp.data)
            if (this.resData.length === this.curItem.length) this.$emit('transmit', this.resData)
            this.loading.close()
          }
        })
      }
      if (this.curItem.indexOf(4) !== -1) {
        getPeopleJw(this.selectForm).then(resp => {
          if (resp.code && resp.code === '200') {
            resp.data.name = resp.location
            for (let i = 0; i < resp.data.items.length; i++) {
              const element = resp.data.items[i]
              element.formName = '境外人口'
            }
            this.resData.push(resp.data)
            if (this.resData.length === this.curItem.length) this.$emit('transmit', this.resData)
            this.loading.close()
          }
        })
      }
    },
    handleSearchItem (index) {
      this.childrenData = this.OrganizeData[index]
      this.childrenItem = 0
      this.selectForm.category = 1
      if (this.curItem.indexOf(index) !== -1) {
        this.curItem.splice(this.curItem.indexOf(index), 1)
      } else {
        this.curItem.push(index)
      }
    },
    handleSelectItem (index) {
      this.childrenItem = index
      this.selectForm.category = index + 1
    },
    close () {
      this.dialogFormVisible = false
    },
    getFormData () {

    }
  },
  watch: {
    detailForm: {
      handler: function (data) {
        this.dialogFormVisible = true
        this.getFormData(data.id)
      },
      deep: true
    }
  }
}
</script>
<style scoped>
.custom-mapinfo-right-card li span.right-card-item-commity{
  background-image: url(~@/assets/application/people/right_icon01_pressed.png);
}
.custom-mapinfo-right-card li span.right-card-item-building{
  background-image: url(~@/assets/application/people/right_icon02_pressed.png);
}
.custom-mapinfo-right-card li span.right-card-item-house{
  background-image: url(~@/assets/application/people/right_icon03_pressed.png);
}
.custom-mapinfo-right-card li span.right-card-item-retanhouse{
  background-image: url(~@/assets/application/people/right_icon04_pressed.png) ;
}
.custom-mapinfo-right-card li span.right-card-item-conyard{
  background-image: url(~@/assets/application/people/right_icon05_pressed.png) ;
}
.custom-mapinfo-right-card li span.right-card-item-people{
  background-image: url(~@/assets/application/people/right_icon06_pressed.png) ;
}

.scardTop {
  width: 100%;
  height: 98px;
  background: url('../../assets/application/search_top_big2.png') no-repeat center center;
}
.scardBot {
  width: 100%;
  height: 198px;
  background: url('../../assets/application/search_bot_big2.png') no-repeat center center;
}
.custom-seach-item {
  padding: 8px 22px 0;
}
.custom-seach-item ul{
  margin-bottom: 20px;
}
.custom-seach-item li p {
  padding-right: 34px;
  background: url('../../assets/application/arrow-bottom2.png') no-repeat center right
}
.custom-chilren-item {
  font-size: 0;
}
.custom-chilren-item dd {
  display: inline-block;
  width: 64px;
  max-width: 64px;
  overflow: hidden;
  padding-left:38px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-right: 14px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  text-overflow:ellipsis;
  white-space:nowrap
}
.custom-chilren-item dd.active {
  color: #80ddee
}
.custom-chilren-item dd.enterprise:nth-child(1) {
  background: url('../../assets/application/Organize/0/icon_01.png') no-repeat left center
}
.custom-chilren-item dd.enterprise:nth-child(2) {
  background: url('../../assets/application/Organize/0/icon_02.png') no-repeat left center
}
.custom-chilren-item dd.enterprise:nth-child(3) {
  background: url('../../assets/application/Organize/0/icon_03.png') no-repeat left center
}

.custom-chilren-item dd.company:nth-child(1) {
  background: url('../../assets/application/Organize/1/icon_01.png') no-repeat left center
}
.custom-chilren-item dd.company:nth-child(2) {
  background: url('../../assets/application/Organize/1/icon_02.png') no-repeat left center
}
.custom-chilren-item dd.company:nth-child(3) {
  background: url('../../assets/application/Organize/1/icon_03.png') no-repeat left center
}
.custom-chilren-item dd.company:nth-child(4) {
  background: url('../../assets/application/Organize/1/icon_04.png') no-repeat left center
}
.custom-chilren-item dd.company:nth-child(5) {
  background: url('../../assets/application/Organize/1/icon_05.png') no-repeat left center
}
.custom-chilren-item dd.company:nth-child(6) {
  background: url('../../assets/application/Organize/1/icon_06.png') no-repeat left center
}

.custom-chilren-item dd.sociology:nth-child(1) {
  background: url('../../assets/application/Organize/2/icon_01.png') no-repeat left center
}
.custom-chilren-item dd.sociology:nth-child(2) {
  background: url('../../assets/application/Organize/2/icon_02.png') no-repeat left center
}
.custom-chilren-item dd.sociology:nth-child(3) {
  background: url('../../assets/application/Organize/2/icon_03.png') no-repeat left center
}
.custom-chilren-item dd.sociology:nth-child(4) {
  background: url('../../assets/application/Organize/2/icon_04.png') no-repeat left center
}
.item {
  margin-bottom: 10px
}
</style>
